<template>
  <fieldset class="elem-field">
    <legend class="field-title">{{ title }}</legend>
    <div class="field-box">
      <slot></slot>
    </div>
  </fieldset>
</template>

<script>
export default {
  name: 'commonFieldset',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.elem-field {
  border: 1px solid #dfdfe3;
  font-weight: 600;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

  .field-title {
    margin-left: 10px;
    font-size: 14px
  }

  .field-box {
  }
}
</style>
